<template>
	<view class="phones">		
		<view class="phones_li" v-for="(item,index) in itemData.images" :key="index">
			<view class="li_img" @click="previewImageClick(index,itemData.images)">
				<u-image :src="item" :width="'154rpx'" height="154rpx" mode="scaleToFill" :lazy-load="true" :radius="6">
					<template v-slot:loading>
					    <u-loading-icon color="red"></u-loading-icon>
					  </template>
				</u-image>
			</view>
			<view class="colces" v-if="useCustomer.tabCurrent==0" @click="delImgClick(index,itemData.id)">
				<view class="bj"></view>
				<text class="iconfont icon-cha"></text>
			</view>
		</view>
		
		<view class="phones_li" @click="imgFun" v-if="itemData.images.length<=5 && useCustomer.tabCurrent==0">
			<view class="li_img">
				<text class="iconfont icon-xiangji"></text>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { ref } from "vue"
	
	//请求接口
	import {
		postOrderLogistic
	} from "@/service/pagesA/customer.js"
	
	//引入用户相关的小仓库
	import useCustomerStore from '@/store/customer.js'
	const useCustomer = useCustomerStore()
		
	const props = defineProps({
		itemData:Object
	})

	//图片上传
	function imgFun(){
		useCustomer.imgFun(props.itemData.id,2);
	}
	
	//预览图片
	function previewImageClick(current,img){
		uni.previewImage({
			current:current,
			urls: img
		})
	}
	
	//删除图片
	function delImgClick(index,id){
		useCustomer.loadingTrue=true;
		let nums=useCustomer.listData.findIndex((value) => value.id == id);
		useCustomer.listData[nums].images.splice(index,1);
		let imgs= useCustomer.listData[nums].images;
		postOrderLogisticFun(imgs,id,nums);
	}
	
	//送货图片上传
	async function postOrderLogisticFun(imgs,id,nums){
		await postOrderLogistic({
			logistic_id:id,
			images:imgs
		})
		.then((res)=>{
			useCustomer.listData[nums].images=res.images;
		})
		.finally(()=>{
			useCustomer.loadingTrue=false;
		})
	}

</script>

<style lang="scss" scoped>
.phones{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	.phones_li{
		flex-wrap: wrap;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		position: relative;
		.li_img{
			width: 154rpx;
			height: 154rpx;
			border-radius: 12rpx;
			background: #F4F5F7;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: 0.3s all;
			position: relative;
			z-index: 1;
			.iconfont{
				color: #ccc;
				font-size: 44rpx;
			}
		}
		.li_img:active{
			background: #eee;
		}
		.colces{
			position:absolute;
			top: 0;
			right: 0;
			width: 40rpx;
			height: 40rpx;
			z-index: 3;
			display: flex;
			align-items: center;
			justify-content: center;
			.iconfont{
				color: #fff;
				z-index: 4;
			}
			.bj{
				width: 0;
				height: 0;
				border-top: 66rpx solid rgba(0, 0, 0, 0.6);
				border-left: 66rpx solid transparent;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 3;
				
			}
		}
	}
	.phones_li:nth-child(4n){
		margin-right: 0;
	}
}
</style>
